/* eslint-disable @typescript-eslint/no-use-before-define */
import { DictValueEnum } from "@/components/DictTag";
import { getConfig } from "@/services/api/module/tenant/storage/config";
import {
	DrawerForm,
	ProForm,
	ProFormInstance,
	ProFormRadio,
	ProFormSelect,
	ProFormText,
	ProFormTextArea
} from "@ant-design/pro-components";
import React, { useEffect, useRef, useState } from "react";
export type OssConfigFormData = Record<string, unknown> & Partial<API.Setting.StorageConfigVo>;
export type OssConfigFormProps = {
	onCancel: (flag?: boolean) => void;
	onSubmit: (values: OssConfigFormData) => Promise<any>;
	open: boolean;
	id: number | undefined;
	accessPolicyOptions: DictValueEnum;
	httpsOptions: DictValueEnum;
};
const titles = ["新增存储桶配置", "编辑存储桶配置"];
const OssConfigForm: React.FC<OssConfigFormProps> = props => {
	// 国际化
	const formRef = useRef<ProFormInstance>();
	const [title, setTitle] = useState(titles[0]);
	const { id, onCancel, onSubmit, open, accessPolicyOptions, httpsOptions } = props;
	// 初始化
	useEffect(() => {
		formRef?.current?.resetFields();
		if (id) {
			setFormValue(id);
		}
	}, [id]);
	// 表单赋值
	const setFormValue = (id: number) => {
		getConfig(id).then((res: { data: any }) => {
			setTitle(titles[1]);
			const { data } = res;
			formRef?.current?.setFieldsValue({
				id: id,
				configKey: data?.configKey,
				endpoint: data?.endpoint,
				accessKey: data?.accessKey,
				secretKey: data?.secretKey,
				domain: data?.domain,
				bucketName: data?.bucketName,
				prefix: data?.prefix,
				accessPolicy: data?.accessPolicy,
				region: data?.region,
				isHttps: data?.isHttps,
				remark: data?.remark
			});
		});
	};
	// 关闭
	const handleCancel = () => {
		onCancel();
	};
	// 表单提交
	const handleFinish = async (values: Record<string, any>) => {
		// @ts-ignore
		return onSubmit({
			...values,
			id: id ? id : undefined
		} as OssConfigFormData);
	};

	return (
		<DrawerForm<OssConfigFormData>
			title={title}
			open={open}
			width={700}
			autoFocusFirstInput
			grid={true}
			formRef={formRef}
			layout="vertical"
			onFinish={handleFinish}
			drawerProps={{
				destroyOnClose: true,
				onClose: () => {
					handleCancel();
				}
			}}
		>
			<ProFormText
				colProps={{ xs: 24, md: 12, lg: 12 }}
				name="configKey"
				label="配置键"
				placeholder="请输入配置键"
				rules={[
					{
						required: true,
						message: "请输入配置键"
					}
				]}
			/>
			<ProFormText
				colProps={{ xs: 24, md: 12, lg: 12 }}
				name="endpoint"
				label="端点"
				placeholder="请输入端点"
				rules={[
					{
						required: true,
						message: "请输入端点"
					}
				]}
			/>
			<ProFormText
				colProps={{ xs: 24, md: 12, lg: 12 }}
				name="accessKey"
				label="accessKey"
				placeholder="请输入accessKey"
				rules={[
					{
						required: true,
						message: "请输入accessKey"
					}
				]}
			/>
			<ProFormText.Password
				colProps={{ xs: 24, md: 12, lg: 12 }}
				name="secretKey"
				label="secretKey"
				placeholder="请输入secretKey"
				rules={[
					{
						required: true,
						message: "请输入secretKey"
					}
				]}
			/>
			<ProFormText colProps={{ xs: 24, md: 12, lg: 12 }} name="domain" label="自定义域名" placeholder="请输入自定义域名" />
			<ProFormText
				colProps={{ xs: 24, md: 12, lg: 12 }}
				name="bucketName"
				label="存储桶名称"
				placeholder="请输入存储桶"
				rules={[
					{
						required: true,
						message: "请输入存储桶"
					}
				]}
			/>
			<ProFormText colProps={{ xs: 24, md: 12, lg: 12 }} name="prefix" label="前缀" placeholder="请输入前缀" />
			<ProFormSelect
				colProps={{ xs: 24, md: 12, lg: 12 }}
				name="accessPolicy"
				valueEnum={accessPolicyOptions}
				label="桶权限"
				rules={[
					{
						required: true,
						message: "请选择桶权限"
					}
				]}
			/>
			<ProFormText colProps={{ xs: 24, md: 12, lg: 12 }} name="region" label="区域" placeholder="请输入区域" />
			<ProFormRadio.Group
				colProps={{ xs: 24, md: 12, lg: 12 }}
				radioType="button"
				valueEnum={httpsOptions}
				name="isHttps"
				label="HTTPS"
				initialValue={"Y"}
				placeholder="请选择是否为HTTPS"
			/>
			<ProFormTextArea colProps={{ xs: 24, md: 24, lg: 24 }} name="remark" label="备注" placeholder="请输入备注" />
		</DrawerForm>
	);
};

export default OssConfigForm;
